require(['./config'], () => {
    require(['template','header','zoom', 'footer','shopcar','fly'], (template,header) => {
      class Detail {
        constructor () {
           this.getDetail().then(()=>{
             this.elevate()
             this.addCart()
             this.count()
             
           })
        }
        elevate(){
          $('.zoom-image').elevateZoom({
            gallery: 'gal1' ,
            cursor:"crosshair",
            // galleryActiveClass:"active",
            // borderSize:"1"
            // 这个参数传入小图的容器ul的id，不带# 
          })
        }
        addCart () {
          $('.btn-shopcart').on('click',  (e)=> {
            $('<div class="fly">').fly({
              start:{
                left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                top: e.clientY,  //开始位置（必填）
              },
              end:{
                left: $('.carNum').offset().left, //结束位置（必填）
                top: $('.carNum').offset().top,  //结束位置（必填）
                // width: 100, //结束时高度
                // height: 100, //结束时高度
              },
              // autoPlay: false, //是否直接运动,默认true
              speed: 1.2, //越大越快，默认1.2
              vertex_Rtop: 100, //运动轨迹最高点top值，默认20
              onEnd: function(){
                // 移除fly
                this.destroy()
                header.calCartCount()
               
              } //结束回调
            })         
            let cartList=localStorage.getItem('cart')
            if(cartList){
              cartList=JSON.parse(cartList)
               const isExist=cartList.some(cart=>{
                 return cart.id===this.detail.id
               })
               if(isExist){
                 cartList=cartList.map(cart=>{
                  //  console.log($('#count').val())
                   if(cart.id===this.detail.id) cart.num+=Number($('#count').val())
                   return cart
                 })
               }else{
                 cartList.push({
                   id:this.detail.id,
                   title:this.detail.title,
                   price:this.detail.price,
                   photo:this.detail.photo[0],
                   num:Number($('#count').val()),
                   check:true
                 })
               }
               localStorage.setItem('cart',JSON.stringify(cartList))
            }else{
              localStorage.setItem('cart',JSON.stringify([{
                   id:this.detail.id,
                   title:this.detail.title,
                   price:this.detail.price,
                   photo:this.detail.photo[0],
                   num:Number($('#count').val()),
                   check:true
              }]))
            }
          })
        }
        getDetail(){
          const localid =location.search.slice(1)
          return new Promise(resolve => {
            $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${localid}`,resp=>{
              const{id,photo,price,title,descContentList,couponStatus,saleNum}=resp.data.detail
              this.detail={
                id,photo,price,title,descContentList
              }
              if(resp.code===200){
                $('#goodsDetail').html(
                  template('goodsDetailTemplate', { photo:photo.slice(0,4),price,saleNum,title, couponStatus,descContentList:descContentList.slice(0,3)})
                )
              }
             resolve()
            }) 
         }) 
        }
        count(){
          $('.add-btn').on('click',()=>{
            $('.des-btn').prop('disabled','')
            $('#count').val($('#count').val()-0+1)
          })
          $('.des-btn').on('click',()=>{
            if(($('#count').val())-0>1){
              $('#count').val($('#count').val()-1)
            }
          })
          
        }
      }
      new Detail()
    })
  })